<template>
	<view class="flash-sale-container">
		<view class="banner">
			限时秒杀 低至1折
		</view>

		<view class="time-slots">
			<scroll-view scroll-x>
				<view class="flex">
					<view class="time-slot" v-for="(time, index) in timeSlots" :key="index"
						:class="{active: activeIndex === index}" @click="activeIndex = index">
						<view class="time-label">{{time}}</view>
						<view class="status-label">{{activeIndex === index ? '抢购中' : '即将开始'}}</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="countdown-container">
			<view class="countdown-title">本场秒杀结束还剩</view>
			<view class="countdown">
				<view class="countdown-box">00</view>
				<view class="countdown-separator">:</view>
				<view class="countdown-box">45</view>
				<view class="countdown-separator">:</view>
				<view class="countdown-box">32</view>
			</view>
		</view>

		<view class="product-list">
			<view class="product-item" v-for="(item, index) in productList" :key="index">
				<view class="product-image">
					商品图片
					<view class="discount-tag">{{ item.discount }}折</view>
				</view>
				<view class="product-info">
					<view class="product-name">{{ item.name }}</view>
					<view class="product-price">
						<view class="current-price">¥{{ item.currentPrice }}</view>
						<view class="original-price">¥{{ item.originalPrice }}</view>
					</view>
					<view class="progress-container">
						<view class="progress-text">
							<span>已售{{ item.soldPercent }}%</span>
							<span>还剩{{ item.remaining }}件</span>
						</view>
						<view class="progress-bar">
							<view class="progress-fill" :style="'width:' + item.soldPercent + '%'"></view>
						</view>
					</view>
					<button class="buy-button">立即抢购</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const productList = ref([{
			name: '北欧风格简约陶瓷花瓶摆件',
			currentPrice: '29.9',
			originalPrice: '59.9',
			discount: '5',
			soldPercent: 60,
			remaining: 20
		},
		{
			name: '多功能厨房收纳置物架',
			currentPrice: '19.9',
			originalPrice: '69.9',
			discount: '3',
			soldPercent: 80,
			remaining: 10
		},
		{
			name: '便携式旅行化妆包',
			currentPrice: '9.9',
			originalPrice: '49.9',
			discount: '2',
			soldPercent: 90,
			remaining: 5
		},
		{
			name: '创意桌面小台灯',
			currentPrice: '39.9',
			originalPrice: '99.9',
			discount: '4',
			soldPercent: 40,
			remaining: 30
		},
		{
			name: '日式简约餐具套装',
			currentPrice: '9.9',
			originalPrice: '99.9',
			discount: '1',
			soldPercent: 95,
			remaining: 3
		},
		{
			name: '多功能便携充电宝',
			currentPrice: '59.9',
			originalPrice: '99.9',
			discount: '6',
			soldPercent: 50,
			remaining: 25
		}
	])

	const timeSlots = ref(['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'])
	const activeIndex = ref(2) // 默认选中12:00
</script>

<style lang="scss" scoped>
	.flash-sale-container {
		padding: 15px;
		padding-bottom: 70px;
		background-color: #f8f8f8;
	}

	.banner {
		width: 100%;
		height: 150px;
		background-color: #ff3e3e;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 15px;
		background-image: linear-gradient(to right, #ff3e3e, #ff7676);
	}

	.time-slots {
		display: flex;
		white-space: nowrap;
		padding: 10px 0;
		margin-bottom: 15px;
		background-color: #fff;
		border-radius: 12px;

		&::-webkit-scrollbar {
			display: none;
		}

		.time-slot {
			flex: 0 0 auto;
			padding: 8px 15px;
			margin-right: 10px;
			text-align: center;
			border-radius: 12px;
			font-size: 14px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-width: 70px;
			background-color: #f5f5f5;
			transition: all 0.3s ease;

			&.active {
				background-color: #ff3e3e;
				color: white;

				.status-label {
					color: rgba(255, 255, 255, 0.8);
				}
			}

			&:first-child {
				margin-left: 15px;
			}

			&:last-child {
				margin-right: 15px;
			}
		}
	}



	.time-label {
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 4px;
	}

	.status-label {
		font-size: 12px;
		color: #999;
	}

	.countdown-container {
		background-color: #fff;
		border-radius: 12px;
		padding: 15px;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.countdown-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.countdown {
		display: flex;
		align-items: center;
	}

	.countdown-box {
		background-color: #333;
		color: white;
		border-radius: 4px;
		padding: 2px 4px;
		margin: 0 2px;
		font-size: 12px;
		font-weight: 600;
	}

	.countdown-separator {
		color: #333;
		margin: 0 2px;
		font-weight: 600;
	}

	.product-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.product-item {
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.product-image {
		width: 100%;
		height: 120px;
		background-color: #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
		position: relative;
	}

	.discount-tag {
		position: absolute;
		top: 5px;
		right: 5px;
		background-color: #ff3e3e;
		color: white;
		font-size: 12px;
		padding: 2px 6px;
		border-radius: 10px;
	}

	.product-info {
		padding: 10px;
	}

	.product-name {
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 5px;
		color: #333;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-price {
		display: flex;
		align-items: baseline;
	}

	.current-price {
		font-size: 16px;
		font-weight: 600;
		color: #ff3e3e;
	}

	.original-price {
		font-size: 12px;
		color: #999;
		text-decoration: line-through;
		margin-left: 5px;
	}

	.progress-container {
		margin-top: 5px;
	}

	.progress-text {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #666;
		margin-bottom: 3px;
	}

	.progress-bar {
		height: 4px;
		background-color: #eee;
		border-radius: 2px;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background-color: #ff3e3e;
		border-radius: 2px;
	}

	.buy-button {
		background-color: #ff3e3e;
		color: white;
		border: none;
		border-radius: 15px;
		padding: 5px 10px;
		font-size: 12px;
		margin-top: 5px;
		width: 100%;
	}
</style>